<#assign secSelect = JspTaglibs["http://www.casic304.cn/secSelect"] />
<#assign dicSelect = JspTaglibs["http://www.casic304.cn/dicSelect"]/>
<#assign fillDept=JspTaglibs["http://www.casic304.cn/fillDept"] />
<html>
<head>
  <meta charset="utf-8">
  <title>质量检验统计</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    .echarts-div #container {
      height: 500px;
      margin-right: 36px
    }

    .echarts-div #containerZhexian {
      height: 500px;
    }

    .echarts-div {
      position: absolute;
      top: 100px;
      left: 16px;
      right: 16px;
      bottom: 16px;
      overflow: auto;
      padding-top: 16px;
    }

    @media screen and (min-width: 1280px) {
      .chartDiv {
        width: 45%;
        float: left;
      }
    }

    @media screen and (min-width: 804px) and (max-width: 1280px) {
      .chartDiv {
        width: 96%;
        float: left;
      }
    }

    @media screen and (min-width: 704px) and (max-width: 1380px) {
      .chartParDiv {
        top: 138px
      }

      #containerZhexian {
        margin-top: 16px
      }
    }

    .selch .layui-icon-date {
      top: 6px !important;
    }
  </style>
</head>
<body class="listBody">
<div class="qbdms-list">
  <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
    <div class="ccpui-enterSel">
      <form class="layui-form" action="" lay-filter="wQbdQualitycheckStatisticsQueryForm">
        <div class="layui-form-body selch">
          <div class="table-top-filter layui-row">
            <div class="qbdms-listForm">
              <label class="layui-form-label">横坐标<span
                  style="color: red;">*</span></label>
              <div class="layui-input-block">
                <select name="hengzuobiao" autocomplete="off" class="layui-input"
                        fieldname="hengzuobiao"
                        lay-filter="hengzuobiao" id="hengzuobiao" lay-verify="required"
                        lay-reqtext="横坐标是必填项">
                </select>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">统计类型<span
                  style="color: red;">*</span></label>
              <div class="layui-input-block">
                <select name="statisticalMethods" autocomplete="off" class="layui-input"
                        fieldname="statisticalMethods"
                        lay-filter="statisticalMethods" id="statisticalMethods"
                        lay-verify="required" lay-reqtext="统计类型是必填项">
                </select>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">年度<span
                  style="color: red;">*</span></label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value start_time1"
                       name="year" readonly lay-verify="required" value="${nowyear}" id="year"
                       placeholder="请输入" lay-reqtext="年度是必填项"/>
              </div>
            </div>
            <div class="selchBtn">
              <a class="layui-btn layui-btn-sm fillBtn" lay-filter="query" lay-event="query"
                 lay-submit qbdms-event="query" id="query">
                <i class="layui-icon layui-icon-search"></i><span>查询</span>
              </a>
              <div class="layui-btn-group">
                <button type="reset" class="layui-btn layui-btn-sm" lay-filter="clears"
                        lay-event="clears" qbdms-event="clears"
                        style="width: 28px;font-size: 12px;padding: 0">
                  <i class="iconfont data-iconcommon_refresh"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="qbdms-echarsDiv chartParDiv">
      <div id="chart1Bar" style="width:96%;height:600px;"></div>
    </div>
  </div>
</div>

<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>

  layui.config({
    base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'common', 'jquery', 'layer', 'laydate', 'publicMethods', 'qbdmsForm',
    'propsHandle'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var form = layui.qbdmsForm;
    var common = layui.common;
    var publicMethods = layui.publicMethods;
    // 基于准备好的dom，初始化echarts实例
    var year = "${nowYear}"; // 年度
    var propsHandle = layui.propsHandle;
    var defProps = {
          //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
          viewMould: 'moulds/', // 组件模块 存放文件 *****
          selectorBtn: '.selectorBtn'
        },
        temQuery = new propsHandle();  // 实例化模板功能部分
    temQuery.initTem({
      selectorBtn: defProps.selectorBtn,
      selectorTemPath: setter.views + defProps.viewMould
    });
    form.render();
    //统计类型
    var tjlxzljy = eval('${tjlxzljy}');
    common.initDicData("statisticalMethods", tjlxzljy);
    var hzb = eval('${hzb}');//横坐标
    common.initDicData("hengzuobiao", hzb);

    var dateTimeFiledLen = $(".dateTimeFiled");
    for (var i = 0; i < dateTimeFiledLen.length; i++) {
      laydate.render({
        elem: dateTimeFiledLen[i] //指定元素
        , type: 'year'
        , trigger: 'click'
      });
    }
    form.on('submit(query)', function () {
      var data1 = form.val("wQbdQualitycheckStatisticsQueryForm");
      getData(data1);
    })
    var myChart1 = echarts.init(document.getElementById('chart1Bar'));

    /**
     * 获取数据
     * */
    function getData(data) {
      if (data.hengzuobiao == "研究室" && (data.statisticalMethods == "紧急例外放行"
          || data.statisticalMethods == "产品证明书")) {
        layer.msg("紧急例外放行,产品证明书没有研究室统计数据，请重新选择", {icon: 5});
        return false;
      }
      $.ajax({
        url: serverPath.qbdmsPath + '/qbdms/wQbdQualitycheckStatistics/getChartData',
        data: {
          "hengzuobiao": data.hengzuobiao,
          "statisticalMethods": data.statisticalMethods,
          "year": data.year,
        },
        type: 'get',
        dataType: 'json',
        async: false,
        success: function (res) {
          if (null == res.data) {
            layer.msg("暂无数据", {icon: 1});
            return false;
          }
          chartzz(res.data, data);
        }
      })
    }

    function chartzz(echartData, formData) {
      var option1 = {
        title: {
          text: formData.year + '年' + formData.statisticalMethods + formData.hengzuobiao + '统计',
          subtext: '',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: echartData.legendData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            data: echartData.seriesData,
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: echartData.seriesData
          }
        ]
      };
      myChart1.setOption(option1)
    }

  });
</script>
</body>
</html>